<template>
  <el-card class="group" shadow="never" body-style="{padding: 0}">
    <div slot="header" class="header">
      <el-divider direction="vertical" />
      <span>{{ group.Label }}</span>
    </div>
    <el-row :gutter="24">
      <el-col v-for="item in group.Column" :key="item.Id" :md="item.ColSet && item.ColSet.IsRow ? 24 : 12" :sm="24">
        <el-form-item :label="item.Label">
          {{ row[item.Name] }}
        </el-form-item>
      </el-col>
    </el-row>
    <template v-if="group.Group">
      <QueryGroup v-for="g in group.Group" :key="g.Id" :group="g" />
    </template>
  </el-card>
</template>

<script>
export default {
  name: 'QueryGroup',
  components: {
  },
  props: {
    group: {
      type: Object,
      default: null
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
  }
}
</script>
<style scoped>
.group {
  margin-top: 5px;
  border: none;
}

.group .header .el-divider {
    width:5px;
    height: 1.1em;
    background-color: #1890ff;
}
</style>
